<template>
  <div id="accordion" class="edit">
    <div class="card">
      <div class="card-header">
        <icon name="th"></icon>
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          <span class="title"> 布局</span>
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">

        <div class="card-body" style="padding: 10px">
          <ul class="nav nav-list accordion-group">
            <li class="rows" id="estRows" v-on:dragstart="onDragStart" draggable="true" v-for="(col, index) in cols" :key="index">
              <div class="line">
                <span class="f">
                  <input type="text" @input="handleInput" v-on:change="handleChange" v-bind:value="col.name"
                         class="form-control colEdit alert alert-dark" >
                </span>
                <span class="f alert alert-dark drag">
                  <icon name="arrows-alt"></icon> 拖动
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <icon name="chart-line"></icon>
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
          <span class="title"> 图库</span>
        </a>
      </div>
      <div id="collapseTwo" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          <div class="row">
            <div class="col-sm-6" style="padding: 3px" v-for="g in graphs" v-bind:key="g.name" draggable="true"
                 @dragstart="onDragStartImage">
              <a href="#" class="thumbnail">
                <img :src="g.image" :alt="g.name" height="80" width="80" :tag="g.name">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Chart from '../chart/chart';

export default {
  name: 'Left',
  data () {
    return {
      cols: [
        { name: '12' },
        { name: '6 6' },
        { name: '8 4' },
        { name: '4 4 4' },
        { name: '2 6 4' }
      ],
      graphs: []
    }
  },
  mounted: function () {
    this.loadImage();
  },
  methods: {
    // 容器拖拽
    onDragStart: function (ev) {
      let val = $(ev.target).find('input').val();
      if (!this.checkCols(val, 1)) return;
      ev.dataTransfer.setData('Text', 'visual' + val);
    },
    // 图形拖拽
    onDragStartImage: function (ev) {
      // 兼容IE 和 Chrome
      let val = $(ev.target).attr('tag') || $(ev.target).find('img').attr('tag');
      ev.dataTransfer.setData('Text', 'graph' + val);
    },
    handleInput: function (e) {
      e.target.value = e.target.value.replace(/[^\d ]/g, '');
    },
    handleChange: function (e) {
      this.checkCols(e.target.value);
    },
    // 检查网格合理性
    checkCols: function (val, quiet) {
      let cols = val.split(' ');
      let sum = cols.reduce(function (a, b) { return parseInt(a) + parseInt(b); }, 0);
      if (sum > 12) {
        if (!quiet) alert('温馨提示：输入有误，网格总值超出上限12！');
        return false;
      }
      return true;
    },
    loadImage: function () {
      this.graphs = Object.values(Chart.components).map((d) => ({name: d.name, image: './static/image/' + d.image}));
      // console.log(this.graphs);
    }
  }
}
</script>

<style scoped>
  .title{ padding-left:10px }
  .line{ font-size: 14px }
  .drag{ padding: 1px 5px }
  .f{ float: left }
  .colEdit { width: 92px; height:25px; margin-right: 3px; font-size: 12px }
</style>
